<script setup lang="ts">
	const cancelLink = () => {
		uni.navigateTo({
			url: "/page_order/cancel_reservation/cancel_reservation"
		});
	}
</script>
<template>
	<view class="zlj_order">
		<view class="d1">
			<text>等待支付,剩余</text><text class="date">20:34</text>
			<view class="d2">
				<text>小二</text><text class="tel">15809282910</text>
			</view>
			<view class="d3">
				<view>
					<text>体检机构:</text><text class="tel">【慈铭】广州体育中心体检中心</text>
				</view>
				<view>
					<text>体检时间:</text><text class="tel">2021-04-12</text>
				</view>
				<view>
					<text>预约单号:</text><text class="tel">1009</text>
				</view>
			</view>
			<view class="d4">
				<view><text>订单号:</text><text class="tel">2343422</text></view>
				<view class="between"><text>
						老年人体检套餐豪华版（女）</text><text class="tel">￥998</text></view>
				<view class="between"><text>脑部CT</text><text class="tel">￥300</text></view>
				<view class="between"><text>心电图</text><text class="tel">￥99</text></view>
				<view class="between"><text style="color:rgb(255, 102, 0);">合计</text><text
						style="color:rgb(255, 102, 0);" class="tel">￥1397</text>
				</view>
			</view>
			<view class="d5">
				<view><text>订单号:</text><text class="tel">2343455</text></view>
				<view class="between"><text>
						肝功三项</text><text class="tel">￥80</text></view>
				<view class="between"><text style="color:rgb(255, 102, 0);">合计</text><text
						style="color:rgb(255, 102, 0);" class="tel">￥8011</text>
				</view>
			</view>
		</view>
	</view>
	<view class="page-container">
		<!-- 底部内容 -->
		<view class="zlj-bottom">
			<view @click="cancelLink">取消订单</view>
			<view>去支付</view>
		</view>
	</view>
</template>
<style lang="scss">
	.zlj_order {
		height: 100vh;
		background-color: rgb(244, 246, 246);

		.date {
			color: rgb(255, 153, 0);
		}

		.d1 {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			font-size: 40rpx;

			text:nth-child(1) {
				margin-left: 30rpx;
			}
		}

		.d2 {
			margin-top: 20rpx;
			background-color: #fff;
			font-size: 36rpx;
			border-bottom: 2rpx solid rgb(242, 242, 242);

			text:nth-child(2) {
				margin-left: 30rpx;
			}
		}

		.d3 {
			background-color: #fff;
			display: flex;
			font-size: 30rpx;
			flex-direction: column;
			flex-wrap: wrap;

			text:nth-child(2) {
				margin-left: 30rpx;
			}
		}

		.between {
			display: flex;
			justify-content: space-between;

			text {
				margin-right: 30rpx;
			}
		}

		.d4 {
			font-size: 30rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.d5 {
			margin-top: 20rpx;
			background-color: #fff;
			display: flex;
			font-size: 30rpx;
			flex-direction: column;
			flex-wrap: wrap;
		}
	}

	.page-container {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100rpx;
		border-top: 2rpx solid rgb(89, 181, 141);
		background-color: #ffffff;

		.zlj-bottom {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;

			view:nth-child(1) {
				height: 100%;
				line-height: 100rpx;
				font-size: 38rpx;
				background-color: rgb(244, 246, 246);
				flex: 1;
				text-align: center;
				// border-radius: 0 0 0rpx 48rpx;
				color: rgb(89, 181, 141);
			}

			view:nth-child(2) {
				text-align: center;
				height: 100%;
				line-height: 100rpx;
				font-size: 38rpx;
				background-color: rgb(89, 181, 141);
				flex: 1;
				// border-radius: 0 0 48rpx 0;
				color: rgb(244, 246, 246);
			}
		}
	}
</style>